<template>
    <!-- 最大盒子 -->
    <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="'下级详情'" :autoBack="true" leftIconColor="$uni-text-color" :bgColor="'#ffffff'" :titleStyle="{  color:'$uni-text-color',fontSize:'32rpx',fontWeight:'600' }" :onShareAppMessage="shareInfo">
        <view class="max_box" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px'}">

            <view class="list_item" v-if="department_title">
                <view class="title">{{ department_title}}</view>
                <view class="message_box">
                    <view class="image"><image :src="`${baseUrl}${head}`" mode="scaleToFill"/></view>
                    <view class="company">{{ name }}</view>
                    <view class="inviter">代理人</view>
                </view>
                <up-tabs :list="tabs" @click="tabsItem" :current="currentTab" lineWidth="20" lineHeight="7" :lineColor="`url(${baseUrl}/uploads/uniapp_image/user/user_user_slidingblock.png) 100% 100%`" :activeStyle="{ color: '#303133', fontWeight: 'bold', transform: 'scale(1.05)'}" :inactiveStyle="{ color: '#606266', transform: 'scale(1)'}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
                </up-tabs>
            </view>
            <!-- <scroll-view v-if="scheduleList.length" scroll-y class="comprehensive" @scrolltolower='listScrolltolower'> -->
            <view v-if="scheduleList.length !== 0">
                <view class="scroll_list_item" v-for="(item,index) of scheduleList" :key="index">
                    <view class="position">{{ item.title }}</view>
                    <view class="quantity_box">
                        <view class="quantity">
                            <view class="Amount_box">
                                <view class="person_number">代理商金额</view>
                                <view class="image_box" @tap="editMoney(item,'money')" v-if="item.state <= 1">
                                    <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/shangjixiangqing_icon_xiugaijine@2.png`" mode="scaleToFill"/>
                                    <view>修改</view>
                                </view>
                            </view>
                            <view class="gender">(男/女)</view>
                            <view class="agent_sum_left">
                                <text class="blue" v-if="!item.agent">
                                    ￥{{ item.agent_man_salary }}
                                </text>
                                <text class="blue" v-else>
                                    <template v-if="item.agent.agent_man_salary == 0 && item.agent.agent_woman_salary == 0">
                                        ￥{{ item.agent.agent_man_salary_max }}
                                    </template>
                                    <template v-else>
                                        ￥{{ item.agent.agent_man_salary }}
                                    </template>
                                </text>
                                /
                                <text class="yellow" v-if="!item.agent">
                                    ￥{{ item.agent_woman_salary }}
                                </text>
                                <text class="yellow" v-else>
                                    <template v-if="item.agent.agent_man_salary == 0 && item.agent.agent_woman_salary == 0">
                                        ￥{{ item.agent.agent_woman_salary_max }}
                                    </template>
                                    <template v-else>
                                        ￥{{ item.agent.agent_woman_salary }}
                                    </template>
                                </text>
                            </view>
                            <view :class="!item.agent || (item.agent && item.agent.agent_man_salary == 0 && item.agent.agent_woman_salary == 0) ? 'Is_not_set' : 'have_set'">
                                {{ !item.agent || (item.agent && item.agent.agent_man_salary == 0 && item.agent.agent_woman_salary == 0) ? '未设置' : '已设置' }}
                            </view>
                        </view>
                        <view class="quantity">
                            <view class="person_number">报名人数</view>
                            <view class="gender">(男/女)</view>
                            <view class="agent_sum"><text class="blue">{{ item.man_apply_total }}人</text> / <text class="yellow">{{ item.woman_apply_total }}人</text></view>
                        </view>
                    </view>
                    <view class="time_state_box">
                        <view class="time_state">
                            <view class="time_box">
                                <view class="blue"></view>
                                <view class="time">班次时间：{{ item.date }} ({{ item.start_time }} ~ {{ item.end_time }})</view>
                            </view>
                            <view class="state_data">
                                <view class="croci"></view>
                                <view class="state_box">
                                    <text class="state_title">开始状态：</text>
                                    <text :class="item.state == 0 ? 'state_await' : 'state_already'">{{ item.state == 0 ? '待开始':item.state == 1 ? '进行中':item.state == 2 ? '已结束' :item.state == 3 ? '已终止' :item.state == 4 ?'已作废':'' }}</text>
                                </view>
                            </view>
                            <view class="state_data">
                                <view class="gary"></view>
                                <view class="state_box">
                                    <text class="state_title">薪资（男/女）:￥{{ item.agent_man_salary }} / ￥{{ item.agent_woman_salary }}</text>
                                </view>
                            </view>
                            <view class="state_data">
                                <view class="croci"></view>
                                <view class="state_box">
                                    <text class="state_title">需求人数（男/女）:{{ item.man_num }} 人<text> / </text>{{ item.woman_num }} 人</text>
                                    <view class="image_box" @tap="editMoney(item,'num')" v-if="item.state <= 1">
                                        <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/shangjixiangqing_icon_xiugaijine@2.png`" mode="scaleToFill"/>
                                        <view>修改</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="button_box">
                        <view class="button1" @tap="onShareGoods(item)" v-if="item.state == 0 || item.state == 1">
                            <view class="image"><image :src="`${baseUrl}/uploads/uniapp_image/staff/shangjixiangqing_icon_share.png`" mode="scaleToFill" /></view>
                            <view class="text">分享招人</view>
                        </view>
                        <view class="button2" @tap="lookPersonnelList(item)">
                            <view class="image"><image :src="`${baseUrl}/uploads/uniapp_image/staff/shangjixiangqing_icon_pepolelist.png`" mode="scaleToFill" /></view>
                            <view class="text">查看人员列表</view>
                        </view>
                    </view>
                </view>
                <view >
                    <s-loadmore-gather :current_page="current_page" :last_page="last_page" ref="loadmoreRef"></s-loadmore-gather>
                </view>
            </view>
            <!-- </scroll-view> -->
            <u-empty v-else mode="list"  icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容" marginTop="50%"></u-empty>
        </view>
        <!-- 设置金额弹出层 -->
        <s-public-models :show="popshows" 
        :imagesucceedSrc="dataToinformaion.imageSrc" 
        :subtitle="dataToinformaion.subtitle"  
        :hint="dataToinformaion.hint" 
        :distinction="dataToinformaion.distinction" 
        :editAgency="dataToinformaion.editAgency"
        :click_type="dataToinformaion.click_type" 
        @cancel="manhourClose" 
        @affirm="manhourSubmit"
        :list="edit_list">
        </s-public-models>
    </s-layout>
</template>
<script setup>
    import { baseUrl } from '@/sheep/config';
    import { onLoad ,onReachBottom} from "@dcloudio/uni-app";
    import {  ref ,computed } from "vue";
    import { showShareModal } from '@/sheep/hooks/useModal';
    import sheep from "@/sheep";
    const userStore = sheep.$store('user').userInfo;
  // 获取系统信息
    const { safeAreaInsets } = uni.getSystemInfoSync();
    const currentTab = ref(0)
    const tabs = ref([
        {
            name: "全部",
            value:''
        },
        {
            name: "待开始",
            value:0
        },
        {
            name: "已开始",
            value:1
        },
    ]);
    const state = ref('')
    const tabsItem = (item) => {
        currentTab.value = item.index;
        state.value = item.value
        page.value = 1
        scheduleList.value = []
        scheduleDataList()
    }
    const department_id = ref()
    const department_title = ref()
    const name = ref()
    const user_id = ref()
    const head = ref()
    onLoad((option) => {
        department_title.value = option.title
        department_id.value = option.department_id
        name.value = option.name
        user_id.value = option.user_id
        head.value = option.head
        scheduleDataList()
    });


  // 封装任务列表接口
    const scheduleList = ref([])
    const page = ref(1)
    const total = ref(0)
    const current_page = ref()
    const last_page = ref()
    const scheduleDataList = async () => {
        let params = {
            filter: JSON.stringify({
                state: state.value,
            }),
            op: JSON.stringify({
                state: '=',
            }),
            user_id:user_id.value,
            department_id:department_id.value,
            page:page.value
        }
        const res = await sheep.$api.agency.scheduleListAPI(params)
        scheduleList.value = [...scheduleList.value,...res?.data.rows]
        total.value = res.data.total
        current_page.value = res.data.current_page
        last_page.value = res.data.last_page
    }

  // 滚动触底事件 + 分页处理
    const loadmoreRef = ref()
    onReachBottom((e)=>{
        loadmoreRef.value.PopupScrolltolower()
        if (current_page.value < last_page.value) {
            page.value += 1;
        } else {
            return;
        }
        scheduleDataList()
    })

// 查看人员列表
const lookPersonnelList = (item)=>{
    sheep.$router.go('/subpackage/user/user/my_agent/agent_personnel_list',{
    schedule_id:item.id,
    // title:i.title
    })
}
    // 分享招人
    const share =ref({
        title:'',
        address:'',
        date:'',
        id:'',
        employeeNeeds:''
    })
    // /移除HTML标签
    const delTag = (str) =>{
      return str.replace(/<[^>]+>/g,"");
    }
    const onShareGoods = (item) => {
        let htmlContent =  delTag(item.demand)
        share.value.title = item.title
        share.value.address = item.address
        share.value.id = item.id
        share.value.date = item.date+' ('+item.start_time+' ~ '+item.end_time +')'
        share.value.employeeNeeds = htmlContent
        showShareModal();
    }
    const shareInfo = computed(() => {
        return sheep.$platform.share.getShareInfo(
            {
                title:  share.value.title,
                desc:  share.value.address,
                params: {
                    page: '3',
                    query:share.value.id
                },
            },
            {
                type: 'clock_in', // 商品海报
                title: share.value.title,
                desc:  share.value.address,
                signUpTime: share.value.date ,
                employeeNeeds: share.value.employeeNeeds ,
            },
        );
    });
// 修改金额
const edit_ids=ref()
const edit_list=ref()
const editMoney = (e,a)=>{
    edit_ids.value = e.id
    popshows.value = true
    dataToinformaion.value.imageSrc = '/uploads/uniapp_image/staff/piliangshezhi_img_bg2.png'
    if(a == 'num'){
        dataToinformaion.value.subtitle = '修改需求人数'
        dataToinformaion.value.hint =  '修改人数后会覆盖已修改的需求人数'
        dataToinformaion.value.distinction = 'number'
        dataToinformaion.value.click_type ='number'
        dataToinformaion.value.editAgency = false
        if(e.agent){
            e.agent.woman_num = e.woman_num
            e.agent.man_num = e.man_num
            edit_list.value = e.agent
        }else{
            edit_list.value = e
        }
    }else{
        dataToinformaion.value.subtitle = '修改代理商金额'
        dataToinformaion.value.hint =  '修改金额后会覆盖已修改的金额'
        dataToinformaion.value.editAgency = true
        dataToinformaion.value.distinction = ''
        if(e.agent){
            e.agent.woman_num = e.woman_num
            e.agent.man_num = e.man_num
            edit_list.value = e.agent
            dataToinformaion.value.click_type ='agency'
        }else{
            edit_list.value = e
            dataToinformaion.value.click_type ='staff'
        }
    }
}

    //工时弹窗
    const popshows = ref(false)
    const edit_money =ref({
        agent_man_salary_max:0,
        agent_woman_salary_max:0,
        man_number:0,
        woman_number:0
    })
    const dataToinformaion = ref({
        subtitle: '',
        imageSrc: '',
        hint:'',
        distinction:'',
        editAgency:false,
        click_type:''

    })
    // 取消按钮
    const manhourClose = (e) =>{
        edit_money.value =''
        popshows.value = e
 
       
    }

    // 提交批量更改按钮 此处参数 e 为输入值 参数 i 为判断是什么值 如果为 salary 为批量设置金额 如果为 man_hour 则是批量设置工时
    const manhourSubmit = async(e,i,a)=> {
        if(i == 'number'){
          
            let params = {
                ids: edit_ids.value ,
            }
            edit_money.value.man_number = Number(e)
            edit_money.value.woman_number = Number(a)
            params.man_num =  Number(edit_money.value.man_number)
            params.woman_num =  Number(edit_money.value.woman_number)
            const res = await sheep.$api.project.postScheduleEdit(params);
            if(res.code == 1){
                sheep.$helper.toast(res.msg);
                setTimeout(()=>{
                    page.value = 1    
                    scheduleList.value = []      
                    scheduleDataList()
                    popshows.value = false
                   
                    edit_money.value.man_number=''
                    edit_money.value.woman_number=''
                    dataToinformaion.value.editAgency = true
                    dataToinformaion.value.distinction = ''
                },500)
            }else{
                sheep.$helper.toast(res.msg);
            }
        }else{
            let params = {}
            edit_money.value.agent_man_salary_max = Number(e)
            edit_money.value.agent_woman_salary_max = Number(a)
            params.agent_man_salary_max = Number(edit_money.value.agent_man_salary_max)
            params.agent_woman_salary_max = Number(edit_money.value.agent_woman_salary_max)
            params.share_id = user_id.value
            params.schedule_id = edit_ids.value
            const res = await sheep.$api.agency.editAgentByScheduleid(params);
            if(res.code == 1){
                sheep.$helper.toast(res.msg);
                setTimeout(()=>{
                    page.value = 1    
                    scheduleList.value = []      
                    scheduleDataList()
                    popshows.value = false
                    edit_money.value.agent_man_salary_max=''
                    edit_money.value.agent_woman_salary_max=''
                   
                    dataToinformaion.value.editAgency = true
                    dataToinformaion.value.distinction = ''
                },500)
            }else{
                sheep.$helper.toast(res.msg);
            }
        }
 
    }
</script>

<style scoped lang="scss">
    page {
        width: 100%;
        height: 100%;
    }

  // 版心
    .area {
        width: calc(100% - 40rpx);
        margin: 0 20rpx;
    }

    .list_item {
        margin-bottom: 20rpx;
        border-radius: 8px;
        background-color: #FFFFFF;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
        padding: 40rpx 30rpx 0rpx 30rpx;
        border-top: 2rpx solid #fdfdfd;
        .title {
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: 36rpx;
            font-style: normal;
            text-decoration: none;
            text-align: left;
            margin-bottom: 20rpx;
        }
        .time_box {
            display: flex;
            align-items: center;
            margin-bottom: 30rpx;
            .surface {
                width: 26rpx;
                height: 26rpx;
                margin-right: 10rpx;
                image {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                }
            }
            .time {
                font-family: PingFangSC;
                color: #666666;
                font-weight: 500;
                font-size: $uni-font-size-sm;
                font-style: normal;
                text-decoration: none;
            }
        }
        .message_box {
            display: flex;
            align-items: center;
            padding-bottom: 30rpx;
            .image {
                width: 44rpx;
                height: 44rpx;
                margin-right: 10rpx;
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 16.5px;
                }
            }
            .company {
                font-family: PingFangSC;
                color: $uni-text-color;
                font-weight: $uni-font-weight;
                font-size: 22rpx;
                font-style: normal;
                text-decoration: none;
                margin-right: 18rpx;
            }
            .inviter {
                border-radius: 4px;
                background-color: #F4F7FF;
                font-family: PingFangSC;
                color: $uni-color-primary;
                font-weight: $uni-font-weight;
                font-size: 20rpx;
                font-style: normal;
                text-decoration: none;
                padding: 5rpx;
            }
        }
    }

    .scroll_list_item {
        padding: 30rpx 0 0 0;
        border-radius: 8px;
        background-color: #FFFFFF;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
        margin-bottom: 20rpx;
        .position {
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: $uni-font-size-big;
            font-style: normal;
            text-decoration: none;
            padding-bottom: 30rpx;
            margin: 0 30rpx;
            border-bottom: 1px solid #EFEFEF;
        }
        .quantity_box {
            display: flex;
            // align-items: center;
            justify-content: center;
            margin: 0 20rpx;
            border-bottom: 1px solid #EFEFEF;
            .quantity {
                width: calc(50% - 30rpx);
                padding-bottom: 30rpx;
                margin-top: 30rpx;
                margin-bottom: 10rpx;
                .Amount_box {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                 
                    
                }
                .person_number {
                    font-family: PingFangSC;
                    color: #999999;
                    font-weight: 600;
                    font-size: 24rpx;
                    font-style: normal;
                    text-decoration: none;
                    text-align: center;
                }
                .agent_sum {
                    font-family: PingFangSC;
                    color: #FF9500;
                    font-weight: $uni-font-weight;
                    font-size: 30rpx;
                    font-style: normal;
                    text-decoration: none;
                    text-align: center;
                    margin: 0 30rpx;
                }
                .count_man {
                    font-family: PingFangSC;
                    color: #FF0000;
                    font-weight: $uni-font-weight;
                    font-size: 30rpx;
                    font-style: normal;
                    text-decoration: none;
                    text-align: center;
                    margin: 0 30rpx;
                }
                .count_woman {
                    font-family: PingFangSC;
                    color: $uni-color-primary;
                    font-weight: $uni-font-weight;
                    font-size: 30rpx;
                    font-style: normal;
                    text-decoration: none;
                    text-align: center;
                    margin: 0 30rpx;
                }
            }
        }
        .time_state_box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 30rpx 0 30rpx;
            .time_state {
                .time_box {
                    display: flex;
                    align-items: center;
                    margin-top: 30rpx;
                    margin-bottom: 20rpx;
                    .blue {
                        width: 10rpx;
                        height: 10rpx;
                        background-color: $uni-color-primary;
                        border-radius: 50%;
                        margin-right: 12rpx;
                    }
                    .time {
                        font-family: PingFangSC;
                        color: $uni-text-color;
                        font-weight: $uni-font-weight;
                        font-size: $uni-font-size-sm;
                        font-style: normal;
                        text-decoration: none;
                    }
                }
                .state_data {
                    display: flex;
                    align-items: center;
                    margin-bottom: 20rpx;
                    .croci {
                        width: 10rpx;
                        height: 10rpx;
                        background-color: #FF6120;
                        border-radius: 50%;
                        margin-right: 12rpx;
                    }
                    .gary{
                        width: 10rpx;
                        height: 10rpx;
                        background-color: #666666;
                        border-radius: 50%;
                        margin-right: 12rpx;
                    }
                    .state_box {
                        display: flex;
                        align-items: center;
                        .state_title {
                            font-family: PingFangSC;
                            color: $uni-text-color;
                            font-weight: $uni-font-weight;
                            font-size: $uni-font-size-sm;
                            font-style: normal;
                            text-decoration: none;
                        }
                        .state_await {
                            font-family: PingFangSC;
                            color: $uni-color-primary;
                            font-weight: $uni-font-weight;
                            font-size: $uni-font-size-sm;
                            font-style: normal;
                            text-decoration: none;
                        }
                        .state_already {
                            font-family: PingFangSC;
                            color: #FF6120;
                            font-weight: $uni-font-weight;
                            font-size: $uni-font-size-sm;
                            font-style: normal;
                            text-decoration: none;
                        }
                    }
                }
            }
            .examine {
                font-family: PingFangSC;
                color: $uni-color-primary;
                font-weight: $uni-font-weight;
                font-size: $uni-font-size-sm;
                font-style: normal;
                text-decoration: none;
            }
        }
        .button_box {
            display: flex;
            align-items: center;
            justify-content: center;
            .button1 {
                display: flex;
                align-items: center;
                justify-content: center;
                width: calc(50% - 20rpx);
                border-right: 4rpx solid #EFEFEF;
                margin: 30rpx 0 30rpx 20rpx;
                .text {
                    font-family: PingFangSC;
                    color: #FF6600;
                    font-weight: $uni-font-weight;
                   font-size:$uni-font-size-26;
                    font-style: normal;
                    text-decoration: none;
                }
            }
            .button2 {
                display: flex;
                align-items: center;
                justify-content: center;
                width: calc(50% - 20rpx);
                margin: 30rpx 20rpx 30rpx 0;
                .text {
                    font-family: PingFangSC;
                    color: $uni-color-primary;
                    font-weight: $uni-font-weight;
                   font-size:$uni-font-size-26;
                    font-style: normal;
                    text-decoration: none;
                }
            }
            .image {
                width: 28rpx;
                height: 28rpx;
                margin-right: 12rpx;
                display: flex;
                align-items: center;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    
        .image_box {
            display: flex;
            align-items: center;
            font-family: PingFangSC;
            color: #0038F7;
            font-weight: 600;
            font-size: 20rpx;
            font-style: normal;
            text-decoration: none;
            margin-left: 16rpx;
            }
            
            image {
                width: 26rpx;
                height: 26rpx;
            }
        }
    :deep(.u-tabs__wrapper__nav__item ){
        width: 33.33%;
        padding: 0;
    }
    :deep(.u-tabs__wrapper__nav__line){
        width: 30rpx !important;
        height: 8rpx !important;
        border-radius: 4rpx !important;
        background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%) !important;
    }
    :deep(.u-tabs__wrapper__nav__item.data-v-0546c3e4) {
        padding: 0 !important;
    }

    .yellow {
        color: #FF6120;
        font-weight: $uni-font-weight;
    }

    .blue {
        color: $uni-color-primary;
        font-weight: $uni-font-weight;
    }

    .gender {
        font-family: PingFangSC;
        color: #B3B3B3;
        font-weight: 500;
        font-size: 22rpx;
        font-style: normal;
        text-decoration: none;
        text-align: center;
        margin: 10rpx 0 12rpx 0;
    }
    .agent_sum {
        font-family: PingFangSC;
        color: #B3B3B3;
        font-weight: 500;
        font-size: 30rpx;
        font-style: normal;
        text-decoration: none;
        text-align: center;
        margin: 0 30rpx;
    }
    .agent_sum_left {
        font-family: PingFangSC;
        color: #B3B3B3;
        font-weight: 500;
        font-size: 30rpx;
        font-style: normal;
        text-decoration: none;
        text-align: center;
        margin: 0 30rpx;
        white-space: nowrap;
    }
        // 已设置
        .have_set {
            height: 24rpx;
            width: 64rpx;
            border-radius: 4px;
            border: 1px solid #0038F7;
            font-family: PingFangSC;
            color: #0038F7;
            font-weight: 400;
            font-size: 18rpx;
            font-style: normal;
            text-decoration: none;
            text-align: center;
            margin: 0 auto;
            margin-top: 12rpx;
        }
        // 未设置
        .Is_not_set {
            height: 24rpx;
            width: 64rpx;
            border-radius: 4px;
            border: 1px solid #FF6600;
            font-family: PingFangSC;
            color: #FF6600;
            font-weight: 400;
            font-size: 18rpx;
            font-style: normal;
            text-decoration: none;
            text-align: center;
            margin: 0 auto;
            margin-top: 12rpx;
        }

</style>